<template>
	<button :class="props.type">
		<slot></slot>
	</button>
</template>

<script lang="ts" setup>
const props = withDefaults(
	defineProps<{
		type?: 'default' | 'abrazine' | string;
	}>(),
	{
		type: 'default',
	},
);
</script>

<style lang="scss" scoped>
button {
	position: relative;

	width: 100%;
	height: auto;
	margin: 10rpx 0;
	padding: 10rpx;
	border-radius: 100rpx;
	box-sizing: border-box;

	color: #fff;
	font-weight: bold;
	font-size: 40rpx;
	// mix-blend-mode: difference;
	overflow: hidden;

	&.default {
		color: black;
		background: linear-gradient(90deg, #C2F799, #edf0aa);
	}
	&.abrazine {
		background: rgba(0, 0, 0, 0.5);
		backdrop-filter: blur(10px);
	}
}
</style>
